<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PULSE - Fitness Supervision App UI</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap"
      rel="stylesheet" />
    <style>
      body {
        font-family: "Inter", sans-serif;
      }
      /* Hide scrollbar for Chrome, Safari and Opera */
      .no-scrollbar::-webkit-scrollbar {
        display: none;
      }
      /* Hide scrollbar for IE, Edge and Firefox */
      .no-scrollbar {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
      }
      .glass {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      .glass-high {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border: 1px solid rgba(255, 255, 255, 0.2);
      }
      .neon-text {
        text-shadow: 0 0 10px rgba(163, 230, 53, 0.5);
      }
    </style>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              dark: "#0f172a",
              brand: "#a3e635", // Lime 400
              accent: "#818cf8", // Indigo 400
            },
          },
        },
      };
    </script>
  </head>
  <body class="bg-slate-900 min-h-screen flex items-center justify-center p-4 overflow-hidden">
    <!-- Background Decoration -->
    <div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
      <div
        class="absolute top-[-10%] left-[-10%] w-96 h-96 bg-purple-600 rounded-full mix-blend-multiply filter blur-[128px] opacity-40 animate-blob"></div>
      <div
        class="absolute top-[-10%] right-[-10%] w-96 h-96 bg-blue-600 rounded-full mix-blend-multiply filter blur-[128px] opacity-40 animate-blob animation-delay-2000"></div>
      <div
        class="absolute bottom-[-20%] left-[20%] w-96 h-96 bg-brand rounded-full mix-blend-multiply filter blur-[128px] opacity-20 animate-blob animation-delay-4000"></div>
    </div>

    <!-- Main Container for Mockups -->
    <div class="flex flex-wrap justify-center gap-8 w-full max-w-7xl">
      <!-- SCREEN 1: Onboarding / Welcome -->
      <div
        class="relative w-[320px] h-[680px] rounded-[3rem] border-8 border-slate-800 bg-slate-900 shadow-2xl overflow-hidden flex flex-col shrink-0 ring-1 ring-white/10">
        <!-- Dynamic Island Placeholder -->
        <div
          class="absolute top-0 left-1/2 transform -translate-x-1/2 h-7 w-24 bg-black rounded-b-2xl z-50"></div>

        <!-- Content -->
        <div class="relative h-full w-full flex flex-col justify-end pb-12">
          <!-- Background Image -->
          <img
            src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?q=80&w=1000&auto=format&fit=crop"
            class="absolute inset-0 w-full h-full object-cover opacity-60"
            alt="Gym" />
          <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/50 to-transparent"></div>

          <div class="relative z-10 px-6">
            <div class="mb-4 flex items-center gap-2">
              <div class="w-2 h-8 bg-brand rounded-full"></div>
              <h1 class="text-4xl font-bold text-white tracking-tighter">PULSE</h1>
            </div>
            <p class="text-slate-300 text-lg mb-8 leading-relaxed">
              不仅仅是健身。<br />
              是关于<span class="text-brand font-semibold">掌控</span>你生活的节奏。
            </p>

            <button
              class="w-full glass-high group relative overflow-hidden rounded-2xl p-4 transition-all hover:bg-white/20">
              <div
                class="relative z-10 flex items-center justify-center gap-2 text-white font-semibold tracking-wide">
                开始自我监督
                <img
                  src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/arrow-right.svg"
                  class="w-5 h-5 group-hover:translate-x-1 transition-transform" />
              </div>
            </button>

            <div class="mt-6 flex justify-center gap-4 text-xs text-slate-400">
              <span>数据驱动</span> • <span>视觉量化</span> • <span>社区激励</span>
            </div>
          </div>
        </div>
      </div>

      <!-- SCREEN 2: Main Dashboard -->
      <div
        class="relative w-[320px] h-[680px] rounded-[3rem] border-8 border-slate-800 bg-slate-950 shadow-2xl overflow-hidden flex flex-col shrink-0 ring-1 ring-white/10">
        <div
          class="absolute top-0 left-1/2 transform -translate-x-1/2 h-7 w-24 bg-black rounded-b-2xl z-50"></div>

        <!-- Header -->
        <div class="px-6 pt-12 pb-4 flex justify-between items-center">
          <div>
            <p class="text-slate-400 text-xs uppercase tracking-widest">Good Morning</p>
            <h2 class="text-white text-xl font-bold">Alex</h2>
          </div>
          <div class="w-10 h-10 rounded-full bg-slate-700 overflow-hidden border-2 border-slate-600">
            <img
              src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=100&auto=format&fit=crop"
              class="w-full h-full object-cover"
              alt="Avatar" />
          </div>
        </div>

        <!-- Scrollable Content -->
        <div class="flex-1 overflow-y-auto no-scrollbar px-4 pb-24">
          <!-- Main Stats Circle -->
          <div class="glass rounded-3xl p-6 mb-6 relative overflow-hidden">
            <div class="flex justify-between items-start mb-4">
              <span class="text-slate-300 text-sm font-medium">自律指数</span>
              <img
                src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/trending-up.svg"
                class="w-5 h-5 text-brand" />
            </div>

            <div class="flex items-center justify-center py-2">
              <div class="relative w-40 h-40 flex items-center justify-center">
                <!-- SVG Ring -->
                <svg class="w-full h-full transform -rotate-90">
                  <circle
                    cx="80"
                    cy="80"
                    r="70"
                    stroke="currentColor"
                    stroke-width="8"
                    fill="transparent"
                    class="text-slate-800" />
                  <circle
                    cx="80"
                    cy="80"
                    r="70"
                    stroke="currentColor"
                    stroke-width="8"
                    fill="transparent"
                    stroke-dasharray="440"
                    stroke-dashoffset="66"
                    class="text-brand shadow-[0_0_15px_rgba(163,230,53,0.5)]"
                    stroke-linecap="round" />
                </svg>
                <div class="absolute text-center">
                  <span class="block text-4xl font-bold text-white neon-text">85</span>
                  <span class="text-xs text-slate-400">Excellent</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Weekly Heatmap -->
          <div class="mb-6">
            <div class="flex justify-between items-end mb-3 px-2">
              <h3 class="text-white font-semibold">本周状态</h3>
              <span class="text-brand text-xs">4 天连胜</span>
            </div>
            <div class="glass rounded-2xl p-4 flex justify-between items-center">
              <!-- Days -->
              <div class="flex flex-col items-center gap-2">
                <span class="text-[10px] text-slate-500">M</span>
                <div class="w-2 h-8 rounded-full bg-brand shadow-[0_0_8px_rgba(163,230,53,0.6)]"></div>
              </div>
              <div class="flex flex-col items-center gap-2">
                <span class="text-[10px] text-slate-500">T</span>
                <div class="w-2 h-8 rounded-full bg-brand shadow-[0_0_8px_rgba(163,230,53,0.6)]"></div>
              </div>
              <div class="flex flex-col items-center gap-2">
                <span class="text-[10px] text-slate-500">W</span>
                <div class="w-2 h-8 rounded-full bg-slate-700"></div>
              </div>
              <div class="flex flex-col items-center gap-2">
                <span class="text-[10px] text-slate-500">T</span>
                <div class="w-2 h-8 rounded-full bg-brand/50"></div>
              </div>
              <div class="flex flex-col items-center gap-2">
                <span class="text-[10px] text-white font-bold">F</span>
                <div class="w-2 h-12 -mt-4 rounded-full bg-white border border-brand"></div>
              </div>
              <div class="flex flex-col items-center gap-2">
                <span class="text-[10px] text-slate-500">S</span>
                <div class="w-2 h-8 rounded-full bg-slate-800 border border-slate-700 border-dashed"></div>
              </div>
              <div class="flex flex-col items-center gap-2">
                <span class="text-[10px] text-slate-500">S</span>
                <div class="w-2 h-8 rounded-full bg-slate-800 border border-slate-700 border-dashed"></div>
              </div>
            </div>
          </div>

          <!-- Today's Plan -->
          <div>
            <h3 class="text-white font-semibold mb-3 px-2">今日计划</h3>
            <div
              class="glass rounded-2xl p-4 flex items-center gap-4 mb-3 cursor-pointer hover:bg-white/10 transition">
              <div
                class="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center text-purple-400">
                <img
                  src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/dumbbell.svg"
                  class="w-6 h-6" />
              </div>
              <div class="flex-1">
                <h4 class="text-white text-sm font-medium">上肢力量训练</h4>
                <p class="text-slate-400 text-xs">45 分钟 • 高强度</p>
              </div>
              <div class="w-6 h-6 rounded-full border-2 border-slate-600"></div>
            </div>

            <div class="glass rounded-2xl p-4 flex items-center gap-4 opacity-50">
              <div class="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center text-blue-400">
                <img
                  src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/glass-water.svg"
                  class="w-6 h-6" />
              </div>
              <div class="flex-1">
                <h4 class="text-white text-sm font-medium">喝水打卡 2L</h4>
                <p class="text-slate-400 text-xs">已完成 1.5L</p>
              </div>
              <img
                src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/check-circle-2.svg"
                class="w-6 h-6 text-brand" />
            </div>
          </div>
        </div>

        <!-- Bottom Nav -->
        <div
          class="absolute bottom-6 left-6 right-6 h-16 glass-high rounded-full flex justify-between items-center px-6 z-20">
          <button class="text-brand">
            <img
              src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/layout-grid.svg"
              class="w-6 h-6" />
          </button>
          <button class="text-slate-400 hover:text-white transition">
            <img src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/activity.svg" class="w-6 h-6" />
          </button>
          <div
            class="w-12 h-12 bg-brand rounded-full -mt-8 flex items-center justify-center shadow-[0_0_20px_rgba(163,230,53,0.4)] border-4 border-slate-900">
            <img
              src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/plus.svg"
              class="w-6 h-6 text-slate-900" />
          </div>
          <button class="text-slate-400 hover:text-white transition">
            <img src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/users.svg" class="w-6 h-6" />
          </button>
          <button class="text-slate-400 hover:text-white transition">
            <img src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/user.svg" class="w-6 h-6" />
          </button>
        </div>
      </div>

      <!-- SCREEN 3: Daily Check-in Modal -->
      <div
        class="relative w-[320px] h-[680px] rounded-[3rem] border-8 border-slate-800 bg-slate-900 shadow-2xl overflow-hidden flex flex-col shrink-0 ring-1 ring-white/10">
        <div
          class="absolute top-0 left-1/2 transform -translate-x-1/2 h-7 w-24 bg-black rounded-b-2xl z-50"></div>

        <!-- Background blur of dashboard -->
        <img
          src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=1000&auto=format&fit=crop"
          class="absolute inset-0 w-full h-full object-cover opacity-20 blur-md"
          alt="Bg" />
        <div class="absolute inset-0 bg-slate-900/80"></div>

        <!-- Modal Content -->
        <div class="relative z-10 flex flex-col h-full px-6 pt-16">
          <div class="flex justify-between items-center mb-8">
            <button class="p-2 rounded-full glass hover:bg-white/10">
              <img
                src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/x.svg"
                class="w-5 h-5 text-slate-300" />
            </button>
            <span class="text-white font-medium">每日记录</span>
            <button class="p-2 w-9"></button>
          </div>

          <!-- Mood Slider Visual -->
          <div class="mb-8">
            <label class="text-slate-400 text-xs uppercase tracking-wider mb-3 block">今日心情状态</label>
            <div class="flex justify-between mb-2">
              <img
                src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/frown.svg"
                class="w-6 h-6 text-slate-500" />
              <img
                src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/meh.svg"
                class="w-6 h-6 text-slate-500" />
              <img
                src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/smile.svg"
                class="w-8 h-8 text-brand drop-shadow-[0_0_8px_rgba(163,230,53,0.8)]" />
            </div>
            <div class="h-2 bg-slate-700 rounded-full relative">
              <div
                class="absolute left-0 top-0 h-full w-[80%] bg-gradient-to-r from-red-500 via-yellow-500 to-brand rounded-full"></div>
              <div
                class="absolute left-[80%] top-1/2 -translate-y-1/2 w-4 h-4 bg-white rounded-full shadow-lg border-2 border-brand cursor-pointer"></div>
            </div>
          </div>

          <!-- Weight Input -->
          <div class="mb-8">
            <label class="text-slate-400 text-xs uppercase tracking-wider mb-3 block">当前体重 (KG)</label>
            <div class="flex items-end justify-center gap-2">
              <img
                src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/minus-circle.svg"
                class="w-8 h-8 text-slate-500 mb-2" />
              <span class="text-6xl font-bold text-white tracking-tighter">72.5</span>
              <img
                src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/plus-circle.svg"
                class="w-8 h-8 text-white mb-2" />
            </div>
          </div>

          <!-- Photo Upload -->
          <div class="flex-1">
            <label class="text-slate-400 text-xs uppercase tracking-wider mb-3 block">体态记录</label>
            <div
              class="w-full h-40 glass rounded-2xl border-2 border-dashed border-slate-600 flex flex-col items-center justify-center gap-2 hover:border-brand/50 transition cursor-pointer">
              <div class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center">
                <img
                  src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/camera.svg"
                  class="w-5 h-5 text-brand" />
              </div>
              <span class="text-slate-300 text-sm">上传今日照片</span>
            </div>
          </div>

          <!-- Save Button -->
          <div class="pb-8 mt-4">
            <button
              class="w-full py-4 bg-brand rounded-2xl text-slate-900 font-bold text-lg shadow-[0_0_20px_rgba(163,230,53,0.4)] hover:shadow-[0_0_30px_rgba(163,230,53,0.6)] transition active:scale-95">
              完成打卡
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
